// 需求：XtXMessage({ message: '恭喜你，这是一条成功消息', type: 'success' })

import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 方案1：准备dom容器 - 传统方式
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)

// 方案2：准备dom容器 - createVNode + render 动态创建标签或者组件
const divVNode = createVNode('div', { class: 'xtx-message-container' })
render(divVNode, document.body)
// 🔔 虚拟DOM(对象)成功写入到页面后，可通过 el 属性获取到真实DOM节点
const div = divVNode.el
// console.log('虚拟DOM', divVNode)
// console.log('真实DOM', div)

// 定时器标识
let timer = null

export const Message = ({ type, message }) => {
  // 实现：根据xtx-message.vue渲染消息提示
  // 1. 导入组件
  // 2. 根据组件用createVNode/h函数动态创建虚拟节点
  const vnode = createVNode(XtxMessage, { type, message })
  // 3. 准备一个DOM容器
  // 4. 把虚拟节点渲染DOM容器中
  render(vnode, div)
  // 5. 开启定时，移出DOM容器内容
  clearTimeout(timer)
  timer = setTimeout(() => {
    render(null, div)
  }, 3000)
}
